<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Foundry Multi-purpose HTML Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=0.9">
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/flexslider.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/ytplayer.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/theme-hyperblue.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
        <link href='http://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600' rel='stylesheet' type='text/css'>
		<link href="http://fonts.googleapis.com/css?family=Poppins:100,300,400,600,700" rel="stylesheet" type="text/css">
        <link href="css/font-poppins.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="nav-container">
            <a id="top"></a>
			<nav class="absolute transparent">
				<div class="nav-bar">
					<div class="module left">
						<a href="index.html">
							<img class="logo logo-light" alt="Foundry" src="img/agency-logo-light.png" />
							<img class="logo logo-dark" alt="Foundry" src="img/agency-logo-dark.png" />
						</a>
					</div>
					<div class="module widget-handle offscreen-toggle right">
						<i class="ti-menu"></i>
					</div>
				</div>
				<div class="offscreen-container bg-dark text-center">
					<div class="close-nav">
						<a href="#">
							<i class="ti-close"></i>
						</a>
					</div>
					<div class="v-align-transform text-center">
						<a href="#"><img alt="Logo" class="image-xs mb40 mb-xs-24" src="img/logo-light.png" /></a>
						<ul class="mb40 mb-xs-24">
							<li class="fade-on-hover"><a href="#top" class="inner-link"><h5 class="uppercase mb8">Home</h5></a></li>
							<li class="fade-on-hover"><a href="#about" class="inner-link"><h5 class="uppercase mb8">About</h5></a></li>
							<li class="fade-on-hover"><a href="#work" class="inner-link"><h5 class="uppercase mb8">Work</h5></a></li>
							<li class="fade-on-hover"><a href="#clients" class="inner-link"><h5 class="uppercase mb8">Clients</h5></a></li>
							<li class="fade-on-hover"><a href="#blog" class="inner-link"><h5 class="uppercase mb8">News</h5></a></li>
							<li class="fade-on-hover"><a href="#contact" class="inner-link"><h5 class="uppercase mb8">Contact</h5></a></li>
						</ul>
						<p class="fade-half">
							438 Malvern Road<br />
							Armadale, VIC 3134<br />
							(03) 38237 37263<br />
							hello@foundry.net
						</p>
						<ul class="list-inline social-list">
							<li>
								<a href="#">
									<i class="ti-twitter-alt"></i>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="ti-dribbble"></i>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="ti-vimeo-alt"></i>
								</a>
							</li>
						</ul>
					</div>
				</div><!--end of offscreen container-->
			</nav>
        </div>
        <div class="main-container">
            <section class="bg-primary pt240 pb240 pt-xs-120 pb-xs-80 overlay image-bg">
            	<div class="background-image-holder">
                    <img alt="image" class="background-image" src="img/agency1.jpg" />
                </div>
            	<div class="container">
            		<div class="row">
            			<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
            				<h3 class="mb56 mb-xs-24">
            					Foundry is a digital design collective, tailoring experiences in web and print for clients all around the globe.
            				</h3>
            				<a class="btn btn-lg btn-white mb0" href="#">Get to know us better</a>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="about"></a>
            <section class="pt180 pb180 pt-xs-80 pb-xs-80">
            	<div class="container">
            		<div class="row">
            			<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
            				<h3 class="mb40 mb-xs-32">An agency founded on the principles of Honesty, Clarity, Simplicity.</h3>
            				<p class="lead mb0">
            					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
            				</p>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section> 
            <a id="work"></a>
            <section class="pt0 pb0 pt-xs-80 bg-secondary image-zoom">
            	<div class="container">
            		<div class="row">
            			<div class="col-md-5 col-sm-6 mt104 mt-sm-80 mt-xs-0 text-center-xs mb-xs-40">
							<h5 class="uppercase"><strong>Vault</strong></h5>
							<h4 class="mb160 mb-xs-80">See how we increased Vault's service signups by more than double.</h4>
							<a class="btn btn-lg" href="#">View Case Study</a>
            			</div>
            			
            			<div class="col-md-4 col-md-push-2 col-sm-6">
            				<img alt="Pic" src="img/agency2.png" />
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <section class="pt0 pb0 pb-xs-80 image-zoom">
            	<div class="container">
            		<div class="row">
            			<div class="col-md-6 mb-xs-40">
            				<img class="p32" alt="Pic" src="img/agency3.png" />
            			</div>
            			<div class="col-md-5 col-md-push-1 col-sm-6 mt104 mt-sm-80 mt-xs-0 text-center-xs">
							<h5 class="uppercase"><strong>ALBM</strong></h5>
							<h4 class="mb160 mb-xs-80">We worked with ALBM to deliver an immersive mobile experience.</h4>
							<a class="btn btn-lg" href="#">View Case Study</a>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <section class="image-bg overlay pt120 pb120 pt-xs-80 pb-xs-80">
            	<div class="background-image-holder">
                    <img alt="image" class="background-image" src="img/agency4.jpg" />
                </div>
            	<div class="container">
            		<div class="row">
            			<div class="col-md-6">
            				<h5 class="uppercase"><strong>Aviary Gallery</strong></h5>
							<h4 class="mb160 mb-xs-80">This impeccably designed Melbourne gallery establishes a new online presence.</h4>
							<a class="btn btn-lg btn-filled" href="#">View Case Study</a>	
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="clients"></a>
            <section class="bg-secondary pt180 pb180 pt-xs-80 pb-xs-80">
            	<div class="container">
            		<div class="row">
            			<div class="col-md-6 col-md-offset-3 text-center">
            				<h3 class="mb48 mb-xs-32">Some amazing companies we've had the pleasure to work with.</h3>
            				<div class="text-slider slider-paging-controls text-center relative">
                                <ul class="slides">
                                    <li>
										<h5>The guys at Foundry were an absolute pleasure to work with - they took on our project with the same enthusiasm and passion as us.</h5>
                                        <div class="quote-author">
                                        	<img alt="Author" class="image-xs mb16" src="img/avatar4.png" />
                                            <h6 class="uppercase mb0">Anna Thompson</h6>
                                            <span>Vault</span>
                                        </div>
                                    </li>
                                    <li>
										<h5>We've worked with Foundry on our web presence over the past 8 years and always relish the opportunity to work alongside them.</h5>
                                        <div class="quote-author">
                                        	<img alt="Author" class="image-xs mb16" src="img/avatar3.png" />
                                            <h6 class="uppercase mb0">Carl Vance</h6>
                                            <span>Aviary Bar</span>
                                        </div>
                                    </li>
                                    <li>
										<h5>There is only once choice when it comes to our marketing collateral, Foundry always deliver inspiring work on-time and budget.</h5>
                                        <div class="quote-author">
                                        	<img alt="Author" class="image-xs mb16" src="img/avatar6.png" />
                                            <h6 class="uppercase mb0">Natasha Canter</h6>
                                            <span>Vault</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
            			</div>
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <section class="bg-primary">
        		<div class="container">
        			<div class="row">
            			<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center overflow-hidden">
            				<h5 class="uppercase text-center fade-half mb64 mb-xs-32">Selected Clients</h5>
            				<div class="col-sm-6">
            					<ul>
            						<li><h6 class="uppercase mb8">Apple</h6></li>
            						<li><h6 class="uppercase mb8">Acorn Technology</h6></li>
            						<li><h6 class="uppercase mb8">Google</h6></li>
            						<li><h6 class="uppercase mb8">Gourmet Traveller</h6></li>
            						<li><h6 class="uppercase mb8">Broadsheet</h6></li>
            						<li><h6 class="uppercase mb8">Padre Food Co.</h6></li>
            						<li><h6 class="uppercase mb8">Foundry</h6></li>
            					</ul>
            				</div>
            				
            				<div class="col-sm-6">
            					<ul>
            						<li><h6 class="uppercase mb8">BOSE</h6></li>
            						<li><h6 class="uppercase mb8">Kilgour Wines</h6></li>
            						<li><h6 class="uppercase mb8">University of Victoria</h6></li>
            						<li><h6 class="uppercase mb8">MOMA NYC</h6></li>
            						<li><h6 class="uppercase mb8">Belltower Ltd.</h6></li>
            						<li><h6 class="uppercase mb8">Bowers & Wilkins</h6></li>
            					</ul>
            				</div>
            			</div>
            		</div><!--end of row-->
        		</div><!--end of container-->
            </section>
            <a id="blog"></a>
            <section class="pt180 pb180 pt-xs-80 pb-xs-80">
            	<div class="container">
            		<div class="row">
            			<div class="col-sm-12 text-center">
            				<h3 class="mb64 mb-xs-32">News & Views</h3>
            			</div>
            		</div><!--end of row-->
            		<div class="row masonry">
            			<div class="masonry-item col-md-4 col-sm-6">
            				<div class="feature bg-secondary p32 pt40 pb40 mb0">
            					<span class="fade-1-4 mb16 display-block">August 3, 2015 in inspiration</span>
            					<h4 class="mb120">Building effective design systems</h4>
            					<a href="#" class="mb0 right">
            						<h6 class="uppercase mb0 color-primary fade-on-hover">Read Story <i class="ti-arrow-right"></i></h6>
            					</a>
            				</div>
            			</div>
            			
            			<div class="masonry-item col-md-4 col-sm-6">
            				<div class="feature bg-secondary p32 pt40 pb40 mb0">
            					<span class="fade-1-4 mb16 display-block">July 21, 2015 in design</span>
            					<h4 class="mb120">Selecting the perfect font for the job. Our top tips.</h4>
            					<a href="#" class="mb0 right">
            						<h6 class="uppercase mb0 color-primary fade-on-hover">Read Story <i class="ti-arrow-right"></i></h6>
            					</a>
            				</div>
            			</div>
            			
            			<div class="masonry-item col-md-4 col-sm-6">
            				<div class="feature bg-secondary p32 pt40 pb40 mb0">
            					<span class="fade-1-4 mb16 display-block">July 29, 2015 in design</span>
            					<h4 class="mb120">Achieving total visual harmony</h4>
            					<a href="#" class="mb0 right">
            						<h6 class="uppercase mb0 color-primary fade-on-hover">Read Story <i class="ti-arrow-right"></i></h6>
            					</a>
            				</div>
            			</div>
            			
            			<div class="masonry-item col-md-4 col-sm-6">
            				<div class="feature bg-secondary p32 pt40 pb40 mb0">
            					<span class="fade-1-4 mb16 display-block">July 14, 2015 in interface</span>
            					<h4 class="mb120">A closer look at case studies</h4>
            					<a href="#" class="mb0 right">
            						<h6 class="uppercase mb0 color-primary fade-on-hover">Read Story <i class="ti-arrow-right"></i></h6>
            					</a>
            				</div>
            			</div>
            			
            			<div class="masonry-item col-md-4 col-sm-6">
            				<div class="feature bg-secondary p32 pt40 pb40 mb0">
            					<span class="fade-1-4 mb16 display-block">June 25, 2015 in music</span>
            					<h4 class="mb120">The ultimate office mixtape, Foundry edition</h4>
            					<a href="#" class="mb0 right">
            						<h6 class="uppercase mb0 color-primary fade-on-hover">Read Story <i class="ti-arrow-right"></i></h6>
            					</a>
            				</div>
            			</div>
            			
            			<div class="masonry-item col-md-4 col-sm-6">
            				<div class="feature bg-secondary p32 pt40 pb40 mb0">
            					<span class="fade-1-4 mb16 display-block">June 17, 2015 in lifestyle</span>
            					<h4 class="mb120">A guide to post-week undwinding</h4>
            					<a href="#" class="mb0 right">
            						<h6 class="uppercase mb0 color-primary fade-on-hover">Read Story <i class="ti-arrow-right"></i></h6>
            					</a>
            				</div>
            			</div>
            			
            		</div><!--end of row-->
            	</div><!--end of container-->
            </section>
            <a id="contact"></a>
            <section class="pt120 pb120 image-bg">
				<div class="map-canvas" data-map-zoom="6" data-address="lucia,californio[nomarker];san francisco;los angeles" data-maps-api-key="AIzaSyCfo_V3gmpPm1WzJEC9p_sRbgvyVbiO83M" data-maps-api-key-2="AIzaSyAVsRr4i3ovR45biSx0DoWRswL1kfdO9ZU"></div>
				<div class="container">
					<div class="row">
						<div class="col-sm-6 overflow-hidden">
							<h3 class="mb64 mb-xs-32">Get In Touch</h3>
							<h4 class="mb16">hello@foundry.net</h4>
							<ul class="list-inline social-list mb40 mb-xs-24">
								<li><a href="#"><i class="ti-twitter-alt"></i></a></li>
								<li><a href="#"><i class="ti-facebook"></i></a></li>
								<li><a href="#"><i class="ti-dribbble"></i></a></li>
								<li><a href="#"><i class="ti-vimeo-alt"></i></a></li>
							</ul>
							<div class="col-sm-6 p0">
								<h6 class="uppercase mb0">San Francisco</h6>
								<p>
									1420 Chilvers Avenue.<br />
									San Francisco<br />
									(03) 4374 4628
								</p>
							</div>
							<div class="col-sm-6 p0">
								<h6 class="uppercase mb0">Los Angeles</h6>
								<p>
									Suite 9A, Clementine Rd.<br />
									Newport, CA<br />
									(03) 3928 3728
								</p>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
            <footer class="footer-2 bg-dark">
				<div class="container">
					<div class="row">
						<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 text-center">
							<a href="#">
								<img alt="Logo" class="image-xs mb32 fade-on-hover" src="img/agency-logo-light.png" />
							</a>
							<h5 class="fade-1-4">Handcrafted by Foundry &copy; 2015<br /> Built with Variant Page Builder</h5>
							<ul class="list-inline social-list mb0">
								<li><a href="#"><i class="ti-twitter-alt"></i></a></li>
								<li><a href="#"><i class="ti-facebook"></i></a></li>
								<li><a href="#"><i class="ti-dribbble"></i></a></li>
								<li><a href="#"><i class="ti-vimeo-alt"></i></a></li>
							</ul>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</footer>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/flickr.js"></script>
        <script src="js/flexslider.min.js"></script>
        <script src="js/lightbox.min.js"></script>
        <script src="js/masonry.min.js"></script>
        <script src="js/twitterfetcher.min.js"></script>
        <script src="js/spectragram.min.js"></script>
        <script src="js/ytplayer.min.js"></script>
        <script src="js/countdown.min.js"></script>
        <script src="js/smooth-scroll.min.js"></script>
        <script src="js/parallax.js"></script>
        <script src="js/scripts.js"></script>
    </body>
</html>